<template>
    <div class="static_content" >
        <el-form ref="form" label-width="100px" label-position="left">
            <el-collapse>
                <template v-for="(data, value) in legendConfig">
                    <el-collapse-item :title="data.title">
                        <div class="collapse_content">
                            <template v-for="(item, index) in data.config">
                                <el-form-item :key="index" v-if="item.type !== 'mutualExclusion'|| mutualExclusionOptions.length">
                                    <template slot="label">
                                        <el-tooltip class="item" effect="dark" :content="item.label"
                                            placement="top">
                                            <div class="form_label_length">{{ item.label }}</div>
                                        </el-tooltip>
                                    </template>

                                    <!-- 文本 -->
                                    <div v-if="item.type == 'text'" class="text_style">
                                        {{ item.title || '' }}
                                    </div>
                                    <!-- check复选框 -->
                                    <div class="select_items" v-if="item.type === 'check'">
                                        <el-checkbox-group v-model="form[item.prop]">
                                            <el-checkbox v-for="(i, y) in item.data" :key="y" :label="i.value">{{ i.label
                                            }}</el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                    <!-- radio单选框 -->
                                    <el-radio-group v-model="form[item.prop]" v-if="item.type === 'radio'">
                                        <el-radio :label="i.value" v-for="(i, y) in item.data" :key="y">{{ i.label
                                        }}</el-radio>
                                    </el-radio-group>
                                    <!-- select下拉组件（单） -->
                                    <div class="select_items">
                                        <el-select v-model="form[item.prop]" size="small" clearable
                                            v-if="item.type === 'select'">
                                            <el-option v-for="(i, y) in item.data" :key="y" :label="i.label"
                                                :value="i.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <!-- select下拉组件（双） -->
                                    <div class="select_items" v-if="item.type === 'selectMultiple'">
                                        <el-select v-model="form[item.prop]" size="small" clearable style="width:65%">
                                            <el-option v-for="(i, y) in item.data" :key="y" :label="i.label"
                                                :value="i.value">
                                            </el-option>
                                        </el-select>
                                        <el-select v-model="form[item.prop2]" size="small" clearable style="width:35%">
                                            <el-option v-for="(i, y) in item.data2" :key="y" :label="i.label"
                                                :value="i.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <!-- 丰度取值 -->
                                    <div class="select_items top_item abundance_item" v-if="item.type === 'abundance'">
                                        <el-row>
                                            <el-col :span="20">
                                                <div class="abundance_dom">
                                                    <el-input-number v-model="form[item.prop]" :min="1" :max="item.max">
                                                    </el-input-number>
                                                    <div class="abundance_dom_prepend">TOP</div>
                                                </div>
                                            </el-col>
                                            <el-col :span="4">
                                                <el-tooltip class="item" effect="dark" placement="top">
                                                    <div slot="content">{{ item.tooltip }}</div>
                                                    <i class="el-icon-question"
                                                        style="margin-left: 15px;transform: scale(1.5)translateY(-2px);"></i>
                                                </el-tooltip>
                                            </el-col>
                                        </el-row>
                                    </div>
                                    <!-- slider滑动组件 -->
                                    <div class="breach_div" v-if="item.type === 'slider'">
                                        <el-tooltip class="item" effect="dark" :content="item.tooltip" placement="top">
                                            <span class="breach_div_icon">
                                                <i class="el-icon-question" v-if="item.tooltip"></i>
                                            </span>
                                        </el-tooltip>
                                        <div class="breach_div_slider">
                                            <el-slider v-model="form[item.prop]" :max="item.max" :min="item.min"
                                                :step="item.step"></el-slider>
                                            <!-- :marks="item.marks" -->
                                            <!-- <el-input :disabled="true" class="breach_div_input"
                                                v-model="form[item.prop]"></el-input> -->
                                        </div>
                                    </div>
                                    <!-- 颜色选择器（多） -->
                                    <div class="btn_replace" v-if="item.type === 'colorMultiple'">
                                        <div class="replace_main">
                                            <div class="replace" @click="selectOnClick(item.prop)">
                                                <div>
                                                    <span v-for="(item, index) in replaceColorList" :key="index"
                                                        :style="`backgroundColor:${item}`"></span>
                                                </div>
                                                <b>{{ form[item.prop] }}</b>
                                                <i class="el-icon-arrow-down" ref="value"></i>
                                            </div>
                                            <el-select v-model="form[item.prop]" :ref="`select${item.prop}`"
                                                @change="changeSelectColors($event, item.prop)">
                                                <el-option v-for="item in selectColorList" :key="item.value"
                                                    :label="item.label" :value="item.value">
                                                    <span class="colorSelect">
                                                        <span
                                                            v-for="(i, y) in item.content.filter((item, index) => index < 8)"
                                                            :key="y" :style="`backgroundColor:${i}`"></span>
                                                        <b>{{ item.label }}</b>
                                                    </span>
                                                </el-option>
                                            </el-select>
                                            <el-button icon="el-icon-edit-outline" class="btn" size="small"
                                                @click="ColorDialogOpen(item)" style="font-size: 18px;"></el-button>
                                        </div>
                                    </div>
                                    <!-- 颜色选择器（单） -->
                                    <div class="colorPicker" @click="pickerOnClick(item.prop)"
                                        v-if="item.type == 'color' || item.type == 'defaultColor'">
                                        <el-color-picker v-model.trim="form[item.prop]"
                                            :ref="`colorPicker${item.prop}`"></el-color-picker>
                                        <div class="title">{{ form[item.prop] }}</div>
                                    </div>
                                    <!-- 输入框 -->
                                    <div v-if="item.type === 'input' || item.type === 'defaultTitle'" class="input">
                                        <el-input v-model="form[item.prop]" clearable>
                                        </el-input>
                                    </div>
                                    <!-- 开关 -->
                                    <div v-if="item.type === 'switch'" class="input">
                                        <el-switch v-model="form[item.prop]" :active-text="item.activeText"
                                            :inactive-text="item.inactiveText">
                                        </el-switch>
                                    </div>
                                    <!-- 字体 -->
                                    <div v-if="item.type === 'defaultSize'" class="weightAndItalic">
                                        <div class="famliy">
                                            <el-select v-model.trim="form[item.prop]" filterable>
                                                <el-option v-for="(item, index) in fontOptions" :label="item.label"
                                                    :value="item.value" :key="index"></el-option>
                                            </el-select>
                                        </div>
                                        <div class="size">
                                            <el-select v-model.trim="form[item.prop2]">
                                                <el-option v-for="(item, index) in SizeOptions" :label="item" :value="item"
                                                    :key="index"></el-option>
                                            </el-select>
                                        </div>
                                        <el-tooltip class="item" effect="dark" content="加粗" placement="top">
                                            <div class="weight" :class="{ 'select': Boolean(form[item.prop3]) }"
                                                @click="changeWeightOrItalic(form[item.prop3], item.prop3)">
                                                B
                                            </div>
                                        </el-tooltip>

                                        <el-tooltip class="item" effect="dark" content="斜体" placement="top">
                                            <div class="italic" :class="{ 'select': Boolean(form[item.prop4]) }"
                                                @click="changeWeightOrItalic(form[item.prop4], item.prop4)">
                                                I
                                            </div>
                                        </el-tooltip>
                                    </div>
                                    <!-- 字体2 -->
                                    <div v-if="item.type === 'defaultSize2'" class="weightAndItalic">
                                        <div class="famliy">
                                            <el-select v-model.trim="form[item.prop]" filterable>
                                                <el-option v-for="(item, index) in fontOptions" :label="item.label"
                                                    :value="item.value" :key="index"></el-option>
                                            </el-select>
                                        </div>
                                        <el-tooltip class="item" effect="dark" content="加粗" placement="top">
                                            <div class="weight" :class="{ 'select': Boolean(form[item.prop3]) }"
                                                @click="changeWeightOrItalic(form[item.prop3], item.prop3)">
                                                B
                                            </div>
                                        </el-tooltip>

                                        <el-tooltip class="item" effect="dark" content="斜体" placement="top">
                                            <div class="italic" :class="{ 'select': Boolean(form[item.prop4]) }"
                                                @click="changeWeightOrItalic(form[item.prop4], item.prop4)">
                                                I
                                            </div>
                                        </el-tooltip>
                                    </div>
                                    <!-- 旋转角度 -->
                                    <div v-if="item.type === 'defaultAngle'" class="input">
                                        <el-select v-model="form[item.prop]" size="small" clearable>
                                            <el-option v-for="(i, y) in RotateOptions" :key="y" :label="i" :value="i">
                                            </el-option>
                                        </el-select>
                                    </div>
                                     <!-- 颜色选择（双） -->
                                     <div v-if="item.type === 'doubleColor'">
                                        <el-color-picker :value="form[item.prop].split(',')[0]"
                                            @change="changedoubleColor($event,item.prop, 0)" style="margin-right: 15px;"></el-color-picker>
                                        <el-color-picker :value="form[item.prop].split(',')[1]"
                                            @change="changedoubleColor($event,item.prop, 1)"></el-color-picker>
                                    </div>
                                    <!-- 互斥下拉框 -->
                                    <div v-if="item.type === 'mutualExclusion'" class="mutualExclusion">
                                        <template v-for="(a,index) in form[item.prop]">
                                            <el-select v-model="a.value" size="small" style="width:45%;margin-right:5%;" >
                                                <el-option v-for="opt in mutualExclusionOptions" :key="opt.value"
                                                    :label="opt.label" :value="opt.value"
                                                    :disabled="setDisabled(opt,form[item.prop])"></el-option>
                                            </el-select>
                                        </template>
                                    </div>
                                </el-form-item>
                            </template>
                        </div>
                    </el-collapse-item>
                </template>
            </el-collapse>

            <el-button type="primary" class="primary_static_btn" @click="updateDraw">更新绘图</el-button>
            <!-- 颜色编辑器 -->
            <el-dialog title="颜色编辑" :visible.sync="dialogVisible" :width="dialogWidth" v-if="dialogVisible" v-dialogDrag >
                <div class="menu_content">
                    <div class="menu_content_left">
                        <div class="title_menu">数值类别</div>
                        <div class="content_menu">
                            <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleChange">
                                <el-menu-item :index="`${i + 1}`" v-for="(item, i) in list" :key="i">
                                    <!-- <i class="el-icon-menu"></i> -->
                                    <span slot="title">
                                        <span class="title_color" :style="`backgroundColor:${item.color}`"></span>
                                        <span>{{ item.text }}</span>
                                    </span>
                                </el-menu-item>
                            </el-menu>
                        </div>

                    </div>
                    <div class="menu_content_right">
                        <div class="title_menu">配色方案</div>
                        <div class="customColors">
                            <div class="replace_main">
                                <div class="replace">
                                    <span v-for="(item, index) in replaceListDialog" :key="index"
                                        :style="`backgroundColor:${item}`"></span>
                                    <b>{{ valueWithin }}</b>
                                </div>
                                <el-select v-model="valueWithin" @change="changeScheme">
                                    <el-option v-for="item in selectList" :key="item.value" :label="item.label"
                                        :value="item.value">
                                        <span class="colorSelect">
                                            <span v-for="(i, y) in item.content.filter((item, index) => index < 8)" :key="y"
                                                :style="`backgroundColor:${i}`"></span>
                                            <b>{{ item.label }}</b>
                                        </span>
                                    </el-option>
                                </el-select>
                            </div>


                            <div class="custrom" style="margin-top: 8px;">
                                <span class="current" :style="`backgroundColor:${selectColor}`"></span>
                                <span>自定义颜色</span>
                            </div>
                        </div>
                        <div class="color_content" @click="isActive">
                            <div class="detail" v-for="(item, index) in colorList" :key="index"
                                :style="`background:${item}`" :data-id="item">
                                <i class="el-icon-check" v-if="selectColor == item"></i>
                            </div>
                        </div>
                        <el-checkbox v-model="checked" style="float: right;margin-bottom: 10px;"
                            @change="changeAllColor">应用所有</el-checkbox>
                    </div>
                </div>
                <div slot="footer" class="dialog-footer btn_fixed">
                    <div class="reverse" @click="reverse">颜色反转</div>
                    <div class="btn_right">
                        <div class="determine" @click="determine">确定</div>
                        <div class="cancel" @click="cancel">取消</div>
                    </div>
                </div>
            </el-dialog>
        </el-form>
    </div>
</template>

<script>
import { deepClone } from '@/utils';
export default {
    name: 'GenecloudUiIndex',
    data() {
        return {
            fontOptions: this.$publicData('fontFamily'),
            RotateOptions: this.$publicData('rotate'),
            SizeOptions: this.$publicData('fontSize'),
            selectColorList: this.$publicData('colorList'),
            value: 'Science',
            form: {
                dsadsasssdas: []
                // hotColor: [],           //热图颜色
                // borderColor: '#23896d', //边框颜色
                // circle: 50,             //圆环半径
                // breach: 0,              //圆环缺口
                // standardization: '是',
                // clusteringMode: '不聚类'
            },
            legendConfig: [],
            //颜色编辑器
            editDom: null,
            dialogVisible: false,
            dialogWidth: '620px',
            replaceColorList: [],
            //分组
            list: [],
            //dialog下拉框替换颜色
            replaceListDialog: [],
            //自定义颜色的所有值
            colorList: [],
            //应用所有
            checked: false,
            //自定义配色
            selectColor: null,
            //dialog下拉框颜色
            selectList: this.$publicData('colorList'),
            valueWithin: '',
            //menu选中的index
            menuIndex: 0,
            colorGroupList: [],
            mutualExclusionOptions: [],
        };
    },
    created() {
        this.$resizeDialog(620, this.dialogWidth)
    },
    computed: {
        setDisabled() {
            return function (opt, list) {
                // opt为每项option，index为el-select索引
                // 全部已选择
                const selectedArr = list.map(item => item.value)
                // 删除自己的已选
                //   selectedArr.splice(index, 1)
                // 其它的已选，禁用
                return selectedArr.includes(opt.value)
            }
        }
    },
    beforeDestroy() {
        this.$unResizeDialog()
    },
    watch: {
        '$attrs.option.colorGroupList': {
            handler(Val, newVal) {
                if (Val) {
                    this.colorInit(Val)
                }
            },
            deep: true,
            immediate: false
        },
        '$attrs.option.mutualExclusionOptions':{
            handler(val, newVal) {
                if (val) {
                   this.$nextTick(()=>{
                    this.mutualExclusionOptions = deepClone(val)
                  });
                }
            },
            deep: false,
            immediate: false
        },
        '$attrs.option': {
            handler(val, newVal) {
                if (val) {
                    this.init(val)
                }
            },
            deep: false,
            immediate: true
        },
    },
    methods: {
        init({ defalutValue, legendConfig, form }) {
            this.value = defalutValue || 'Science'
            this.legendConfig = legendConfig
            this.form = form
            this.replaceColorList = this.selectColorList.find(item => item.value === this.value).content.filter((item, index) => index < 8)
        },
        colorInit(arr) {
            this.colorGroupList = deepClone(arr)
            this.list = deepClone(arr)
        },
        //触发下拉事件
        selectOnClick(prop) {
            this.$refs[`select${prop}`][0].toggleMenu()
        },
        //触发颜色编辑事件
        pickerOnClick(prop) {
            this.$refs[`colorPicker${prop}`][0].handleTrigger()
        },
        //改变下拉框颜色
        changeSelectColors(value, prop) {
            const newColor = this.selectColorList.find(item => item.value === value) || {}
            this.replaceColorList = newColor.content.filter((item, index) => index < 8)
            this.value = value
            this.list.map((item, index) => {
                item.color = newColor.content[index]
            })
            this.selectColor = newColor.content[0]
            this.form[prop] = value
        },
        updateDraw() {
            this.$emit('updateDraw', this.form, this.list);
        },
        //打开颜色编辑器
        ColorDialogOpen(dom) {
            if (this.list.length < 1) return this.$message.error('暂无分组信息，请先上传文件！')
            this.editDom = dom
            this.dialogVisible = true
            // //替换的颜色
            this.replaceListDialog = this.selectList.find(item => item.value === this.form[dom.prop]).content.filter((item, index) => index < 8)
            this.valueWithin = this.form[dom.prop]
            this.colorList = this.selectList.find(item => item.value == this.valueWithin).content
            this.selectColor = this.list[0].color
            this.checked = this.list.every(item => item.color == this.selectColor)
        },
        //菜单切换
        handleChange(key) {
            this.menuIndex = key - 1
            this.selectColor = this.list[key - 1].color
        },
        //选中的颜色
        isActive(e) {
            if (e.target.dataset.id) {
                this.selectColor = e.target.dataset.id
                this.checked = false
                this.list[this.menuIndex].color = e.target.dataset.id
            }
        },
        //改变所有的颜色
        changeAllColor(value) {
            if (value) {
                this.list = this.list.map(item => {
                    return {
                        text: item.text,
                        color: this.selectColor
                    }
                })
            } else {
                this.changeScheme(this.valueWithin)
            }
        },
        //颜色反转
        reverse() {
            const color = this.list.map(item => item.color).reverse()
            this.list = this.list.map((item, index) => {
                return {
                    text: item.text,
                    color: color[index]
                }
            })
        },
        //确定
        determine() {
            this.colorGroupList = deepClone(this.list)
            this.$emit('colorList', this.list);
            this.form[this.editDom.prop] = this.valueWithin
            const newColor = this.selectColorList.find(item => item.value === this.valueWithin) || {}
            this.replaceColorList = newColor.content.filter((item, index) => index < 8)
            this.dialogVisible = false
        },
        //取消
        cancel() {
            this.list = deepClone(this.colorGroupList)
            this.dialogVisible = false
        },
        //改变下拉框颜色
        changeScheme(value) {
            //替换的颜色
            this.replaceListDialog = this.selectList.find(item => item.value === value).content.filter((item, index) => index < 8)
            const item = this.selectList.find(item => item.value === value) || []
            this.colorList = item.content
            this.list.map((item, index) => {
                item.color = this.colorList[index]
            })
            this.checked = false
            this.selectColor = this.colorList[0]
            this.replaceListDialog = item.content.filter((item, index) => index < 8)
        },
        changeWeightOrItalic(value, prop) {
            this.form[prop] = value == 0 ? 1 : 0
        },
        //改变颜色（双）
        changedoubleColor(value, prop, num) {
            let arr1 = this.form[prop].split(',')[0]
            let arr2 = this.form[prop].split(',')[1]
            if (num == 0) {
                arr1 = value
            } else {
                arr2 = value
            }
            this.form[prop] = arr1 + ',' + arr2
        }
    },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

//修改折叠面板默认样式
::v-deep .el-collapse .el-collapse-item__header {
    background-color: #fff;
    border: 0;
    height: 70px;
    font-weight: 700;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    min-width: 120px;
}

::v-deep .el-collapse .el-collapse-item__header::after {
    background-color: #fff;
}

.collapse_content {
    padding: 15px 25px;
    overflow-x: auto;
    .form_label_length{
        width: 90px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}

.btn_replace {
    ::v-deep .el-input__inner {
        height: 35px;
        line-height: 35px;
        border: 0 !important;
    }

    .replace_main {
        position: relative;

        .btn {
            position: absolute;
            top: 0;
            left: 240px;
            height: 35px;
            padding: 0 10px;
        }
    }

    .replace {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #ccc;
        padding: 0 15px 0;
        width: 220px;
        height: 35px;
        line-height: 35px;
        border-radius: 5px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        background-color: #fff;
        cursor: pointer;

        span {
            width: 10px;
            height: 10px;
            display: inline-block;
        }
    }
}

.colorSelect {
    span {
        display: inline-block;
        width: 15px;
        height: 15px;
        margin-right: 1px;
    }
}

.colorPicker {
    position: relative;
    // background-color: red;
    border: 1px solid #ccc;
    // margin: 0 47px 0 11px;
    width: 220px;
    cursor: pointer;
    // z-index: 9999;
    // margin-left: 10px;
    height: 40px;
    border-radius: 6px;
    padding: 2px 0 0 5px;

    ::v-deep .el-color-picker__trigger {
        border: 0;
        height: 35px;
        width: 35px;
    }

    .title {
        position: absolute;
        top: 0;
        left: 50px;
    }
}

.breach_div {
    // margin-bottom: 20px;
    display: flex;
    // background-color: red;
    position: relative;

    .breach_div_icon {
        // padding: 0 10px 0 0;
        transform: translateX(-25px);
    }

    .breach_div_slider {
        flex: 1;
    }

    .breach_div_input {
        width: 50px;
        // height: 10px !important;
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);

        ::v-deep .el-input__inner {
            padding: 0 0 0 5px;
            height: 30px;
        }
    }
}

.primary_static_btn {
    // position: absolute;
    // bottom: 0;
    // right: 25px;
    border-radius: 18px;
    margin-top: 15px;
    float: right;
}

.select_items {
    ::v-deep .el-input__inner {
        border-radius: 6px;
    }
}

.input {
    ::v-deep .el-input__inner {
        height: 35px;
        line-height: 35px;
        border-radius: 6px !important;
    }
}

//颜色编辑器
::v-deep .el-dialog__body {
    margin: 0 25px 0;
    padding: 0 15px;
    border-top: 1px solid #ccc;

    .el-input--suffix .el-input__inner {
        opacity: 0;
    }

    .el-select>.el-input {
        transform: translateY(-32px) !important;
    }

    height: 450px;

    .replace {
        align-items: center;
        border: 1px solid #ccc;
        padding: 0 15px 0;
        width: 200px;
        height: 35px;
        line-height: 35px;
        border-radius: 5px;
        z-index: 1;
        background-color: #fff;
        cursor: pointer;

        span {
            width: 10px;
            height: 10px;
            display: inline-block;
        }
    }
}



::v-deep .el-dialog__header {
    padding: 15px 35px !important;
    background: #fff;

    .el-dialog__title {
        color: #000 !important;
        font-weight: 400;
    }
}

::v-deep .el-dialog__footer {
    border-top: 1px solid #ccc;
    margin: 0 25px;

    .btn_fixed {
        // position: absolute;
        // bottom: 15px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin: 0;
        // padding-top: 15px;
        // border-top: 1px solid #ccc;

        .reverse {
            background-color: #e4f2fc;
            padding: 6px 15px;
            border: 0;
            cursor: pointer;
            color: $themeTopToolColor;
        }

        .btn_right {
            display: flex;
            justify-content: space-around;
        }

        .determine {
            cursor: pointer;
            background-color: $themeTopToolColor;
            color: #fff;
            border: 0;
            padding: 7px 16px;
            border-radius: 3px;
            margin-right: 15px;
        }

        .cancel {
            cursor: pointer;
            background-color: #fff;
            color: #666;
            border: 1px solid #ccc;
            padding: 6px 15px;
            border-radius: 3px;
        }
    }
}

.menu_content {
    display: flex;
    justify-content: space-between;
    height: 80%;

    .title_color {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        margin-right: 5px;
        // background-color: red;
        display: inline-block;
    }

    .menu_content_left {
        width: 200px;
        // height: 400px;
        // border-right: 1px solid #ccc;

        .title_menu {
            padding: 25px 0 5px;


        }

        ::v-deep .el-menu-item.is-active {
            color: #000;
            background-color: #ccc;
        }

        .content_menu {
            width: 200px;
            height: 100%;
            overflow-y: auto;
            // margin-bottom: 65px;
        }

        ::v-deep .el-menu-item,
        .el-submenu__title {
            height: 45px;
            line-height: 45px;
        }


    }

    .menu_content_right {
        flex: 1;
        padding-left: 25px;
        height: 450px;

        border-left: 1px solid #ccc;

        .title_menu {
            padding: 25px 0 5px;
        }

        .customColors {
            display: flex;

            .current {
                margin-left: 15px;
                width: 10px;
                height: 10px;
                background-color: red;
                display: inline-block;
            }
        }

        ::v-deep .el-input--suffix .el-input__inner {
            height: 30px;
            border-radius: 3px;
        }

        ::v-deep .el-input__icon {
            line-height: 30px;
        }

        .color_content {
            // background-color: #ccc;
            width: 320px;
            height: 295px;
            margin-top: 15px;
            overflow-y: auto;
            display: flex;
            flex-wrap: wrap;

            // justify-content: flex-start;
            // ::v-deep .el-radio__inner{
            //     width: 35px;
            //     height: 35px;
            //     // background-color: red;
            //     border: 0;
            // }
            // ::v-deep .el-radio{
            //     margin: 0 15px 15px 0;
            // }
            .detail {
                width: 40px;
                height: 40px;
                margin: 0 15px 15px 0;
                border-radius: 50%;
                text-align: center;
                line-height: 40px;

                .el-icon-check {
                    color: #fff;
                    transform: scale(1.5);
                }

                cursor: pointer;
                // &.is-active{

                // }
            }


        }
    }
}

.text_style {
    font-weight: 700;
    font-size: 16px;
    font-family: 'KaiTi';
    transform: translateX(-100px);
    min-width: 90px;
}

.top_item {
    ::v-deep .el-input__inner {
        border-radius: 0 6px 6px 0;
        height: 35px;
        line-height: 35px;
    }
}

::v-deep .el-input__icon {
    line-height: 40px !important;
}

.weightAndItalic {
    display: flex;
    justify-content: flex-start;

    ::v-deep .el-input__inner {
        height: 35px;
        line-height: 35px;
        border-radius: 6px;
    }

    .famliy {
        width: 200px;
    }

    .size {
        margin-left: 5px;
        width: 120px;
    }
}

.weight,
.italic {
    min-width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
    line-height: 30px;
    text-align: center;
    transform: translateY(5px);
    margin-left: 5px;
    cursor: pointer;

    &.select {
        border: 1px solid $themeTopToolColor;
        color: #fff;
        background-color: $themeTopToolColor;
    }
}

.weight {
    font-weight: 700;
}

.italic {
    font-style: italic;
    // transform: translateY(5px);
}

.abundance_item {
    display: flex;
}

.abundance_dom {
    position: relative;

    // background-color: red;
    .abundance_dom_prepend {
        padding: 0 15px;
        height: 36px;
        transform: translateY(1px);
        border-radius: 6px 0 0 6px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #ccc;
        // border: 1px solid #ccc;
    }

    ::v-deep .el-input-number {
        .el-input__inner {
            padding-left: 35px;
            padding-right: 0;
        }

        width: 100%;

        .el-input__inner {
            height: 36px;
            border-radius: 6px;
        }

        .el-input-number__decrease,
        .el-input-number__increase {
            display: none;
        }
    }
}

::v-deep .el-form-item__content {
    min-width: 150px;
}
</style>